<template>
	<div class="sort-box">
		<!-- 头部 -->
		<div class="header">
			<div class="input-box">
				<input type="text" placeholder="请输入您要查询的商品" />
				<span></span>
			</div>
		</div>

		<!-- 内容 -->
		<div class="content">
			<!-- 左边一级分类 -->
			<ul class="con-left">
				<li @click="navCheck(index)" :class="nav.isSelect ? 'check-li' : ''" v-for="(nav, index) in navListOne" :key="index">
					<span :class="nav.isSelect ? nav.check : nav.noCheck"></span>
					<p>{{ nav.title }}</p>
				</li>
			</ul>
			<!-- 右边二级分类 -->
			<div class="con-right">
				<ul class="nav-cont" v-for="(navCont, i) in navListTwo" :key="navCont.i">
					<div class="nav-cont-title">
						<p :class="marker[i]"></p>
						<h6>{{ navCont.title }}</h6>
					</div>
					<li @click="checkTwo(navCont.title, navConts)" v-for="(navConts, index) in navCont.content" :key="index">{{ navConts }}</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'sort',
	data() {
		return {
			marker: ['t1', 't2', 't3', 't4', 't5', 't6'],
			typeOne: '',
			typeTwo: '',
			typeThree: '',
			navListTwo: [],
			navListOne: [
				{
					title: '鲜花',
					isSelect: true,
					noCheck: 'noCheck1',
					check: 'check1',
					checkOne: 'check-li',
					navListTwo: [
						{
							title: '用途',
							content: ['爱情', '生日', '友情', '周年纪念', '求婚', '探病', '老师长辈', '商务鲜花', '祝贺鲜花', '婚庆', '道歉', '缅怀追悼']
						},
						{
							title: '花材',
							content: [
								'玫瑰',
								'百合',
								'玫瑰+百合',
								'康乃馨',
								'玫瑰+康乃馨',
								'向日葵',
								'扶郎',
								'向日葵+百合',
								'康乃馨+百合',
								'满天星',
								'勿忘我',
								'混搭绣球',
								'马蹄莲',
								'郁金香',
								'菊花',
								'洋桔梗'
							]
						},
						{
							title: '对象',
							content: ['恋人', '朋友', '父母', '领导', '老师', '客户', '长辈', '病人']
						},
						{
							title: '类型',
							content: [
								'花束',
								'花盒',
								'卡通花束',
								'巧克力鲜花',
								'抱抱筒',
								'手提花篮',
								'果篮',
								'瓶花/家居鲜花',
								'会议桌花',
								'讲台花',
								'婚庆手捧花',
								'草莓花束',
								'巧克力',
								'网红鲜花',
								'鲜花爱情'
							]
						},
						{
							title: '枝数',
							content: ['1枝', '5枝', '6枝', '7枝', '8枝', '9枝', '11枝', '12枝', '13枝', '16枝', '19枝', '21枝', '29枝', '33枝', '36枝', '66枝', '99枝', '99以上']
						},
						{
							title: '颜色',
							content: ['红色', '粉色', '香槟', '白色', '蓝色', '紫色', '黄色', '混色', '七彩']
						}
					]
				},
				{
					title: '花篮',
					isSelect: false,
					noCheck: 'noCheck2',
					check: 'check2',
					checkOne: 'check-li',
					navListTwo: [
						{
							title: '用途',
							content: ['开业', '乔迁', '典庆', '活动', '会议', '婚庆', '祝寿']
						},
						{
							title: '类型',
							content: ['经典开业花篮', '三脚架花篮', '罗马柱花篮', '网红气球开业花篮']
						}
					]
				},
				{
					title: '绿植',
					isSelect: false,
					noCheck: 'noCheck3',
					check: 'check3',
					checkOne: 'check-li',
					navListTwo: [
						{
							title: '花材',
							content: ['发财树', '绿萝', '红掌', '富贵竹', '蝴蝶兰', '鸿运当头', '白掌', '文竹', '开运竹', '金边兰']
						},
						{
							title: '类别',
							content: ['桌面盆栽', '大型盆栽']
						}
					]
				},
				{
					title: '蛋糕',
					isSelect: false,
					noCheck: 'noCheck4',
					check: 'check4',
					checkOne: 'check-li',
					navListTwo: [
						{
							title: '类型',
							content: ['生日蛋糕', '爱情蛋糕', '祝寿蛋糕', '儿童卡通蛋糕', '彩虹蛋糕', '生肖蛋糕', '情趣蛋糕', '麻将蛋糕', '数码蛋糕', '恶搞蛋糕', '网红蛋糕', '鲜花+蛋糕组合']
						},
						{
							title: '口味',
							content: ['水果蛋糕', '巧克力蛋糕', '鲜奶蛋糕', '慕斯蛋糕']
						},
						{
							title: '造型',
							content: ['心形蛋糕', '圆形蛋糕', '方形蛋糕', '卡通蛋糕']
						},
						{
							title: '层次',
							content: ['单层', '双层', '多层']
						}
					]
				},
				{
					title: '礼品',
					isSelect: false,
					noCheck: 'noCheck5',
					check: 'check5',
					checkOne: 'check-li',
					navListTwo: [
						{
							title: '类型',
							content: ['卡通公仔', '风味花茶', '手工巧克力', '精品饰品', '绝美皂花', '永生花礼', '音乐抱枕', '创意好灯', '卡通花束', '化妆品', '其他']
						},
						{
							title: '对象',
							content: ['恋人', '朋友', '男生', '女生', '同事', '长辈', '老师', '病人', '领导']
						},
						{
							title: '用途',
							content: ['生日', '表白', '分别', '致歉', '毕业', '纪念日']
						}
					]
				},
				{
					title: '永生花',
					isSelect: false,
					noCheck: 'noCheck6',
					check: 'check6',
					checkOne: 'check-li'
				},
				{
					title: '热卖商品',
					isSelect: false,
					noCheck: 'noCheck7',
					check: 'check7',
					checkOne: 'check-li'
				}
			]
		};
	},
	methods: {
		/* 一级导航栏 */
		navCheck(i) {
			this.navListOne.forEach((item, index) => {
				if (i == index) {
					item.isSelect = true;
					if (item.title != '永生花' && item.title != '热卖商品') {
						this.navListTwo = item.navListTwo;
					}else{
						this.$router.replace({
							name: 'SortS',
							query: {
								typeOne: "鲜花",
								typeTwo: "",
								typeThree: ""
							}
						});
					}
					this.typeOne = item.title;
				} else {
					item.isSelect = false;
				}
			});
		},
		/* 二级导航栏 */
		checkTwo(typeTwo, typeThree) {
			this.typeTwo = typeTwo;
			this.typeThree = typeThree;
			this.$router.replace({
				name: 'SortS',
				query: {
					typeOne: this.typeOne,
					typeTwo: this.typeTwo,
					typeThree: this.typeThree
				}
			});
		}
	},
	created() {
		this.navListTwo = this.navListOne[0].navListTwo;
		this.typeOne = this.navListOne[0].title;
		// this.axios.get('https://www.fastmock.site/mock/db3aaecafecce7bef237fef166118389/huayu/huayu-sort-datas').then(res => {
		// 	// console.log(res);
		// 	this.navListOne = res;
		// 	this.navListTwo = res[0].navListTwo;
		// });
	},
	mounted() {},
	components: {}
};
</script>

<style scoped="scoped">
@import url('../css/publice.css');
.sort-box {
	width: 100%;
	background-color: #f5f5f5;
}
.header {
	width: 100%;
	height: 1.12rem;
	background-color: #f5f5f5;
	border-bottom: 0.01rem solid #ddd;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 0.2rem;
}
.input-box {
	width: 6.8rem;
	height: 0.6rem;
	background-color: white;
	border-radius: 0.1rem;
	display: flex;
	align-items: auto;
	justify-content: space-around;
	padding: 0 0.15rem;
}
.input-box input {
	border: none;
	height: 100%;
	width: 92%;
}
.input-box span {
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-image: url(http://i.huasongwang.com/i/c/icon5.png);
	background-position: 3px 2px;
	background-size: 450%;
}

/* 内容 */
.content {
	height: 12.22rem;
	width: 100%;
	position: fixed;
	top: 1.12rem;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	background-color: #f5f5f5;
}
.con-left {
	width: 20%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.con-left li {
	width: 70%;
	padding: 0.1rem 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 0.23rem;
	color: #666666;
	border-bottom: #f5f5f5 0.04rem solid;
}
.con-left li span {
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-image: url(http://i.huasongwang.com/i/c/cateicon.png);
	background-size: 58px;
}
.con-left .check-li {
	color: #ff6700;
	border-bottom: #ff6700 0.04rem solid;
}
.noCheck1 {
	background-position: 1px -5px;
}
.noCheck2 {
	background-position: 1px -33px;
}
.noCheck3 {
	background-position: 0px -62px;
}
.noCheck4 {
	background-position: 0px -88px;
}
.noCheck5 {
	background-position: 0px -116px;
}
.noCheck6 {
	background-position: 0px -140px;
}
.noCheck7 {
	background-position: 0px -167px;
}
.check1 {
	background-position: -28px -5px;
}
.check2 {
	background-position: -28px -33px;
}
.check3 {
	background-position: -29px -62px;
}

.check4 {
	background-position: -29px -88px;
}
.check5 {
	background-position: -29px -116px;
}
.check6 {
	background-position: -28px -5px;
}
.check7 {
	background-position: -28px -5px;
}

/* 右边 */
.con-right {
	width: 80%;
	height: 100%;
	overflow: auto;
	background-color: white;
}
.nav-cont {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	align-content: space-around;
}
.nav-cont-title {
	width: 100%;
	height: 0.6rem;
	background-color: #fcfcfc;
	display: flex;
	align-items: center;
	padding-left: 0.2rem;
}
.nav-cont-title p {
	width: 0.16rem;
	height: 0.16rem;
	border-radius: 50%;
}
.t1 {
	background-color: #ed5564;
}
.t2 {
	background-color: #ac92ed;
}
.t3 {
	background-color: #4fc0e8;
}
.t4 {
	background-color: #a0d468;
}
.t5 {
	background-color: #ec87bf;
}
.t6 {
	background-color: #ffce55;
}

.nav-cont-title h6 {
	padding-left: 0.2rem;
}

.nav-cont li {
	width: 33%;
	height: 0.6rem;
	padding-left: 0.3rem;
	padding-top: 0.05rem;
	color: #666666;
	font-size: 0.23rem;
	white-space: nowrap;
}
</style>
